<template>
	<view 
	    class="nav-bar" 
		:class="{'sticky':sticky}"
	    :style="{ 
			height: `${statusBarHeight}px`,
			background:bgColor,
			color:`${white?'#fff':'#333'}`,
			borderColor: borderColor
		}">
		<view class="nav-content">
			<view class="search_wrap" v-if="search" @click="handleSearch">
				<view class="icon">
					<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/client/common/search.png" mode="widthFix"></image>
				</view>
				<view class="placeholder" :class="{value:value}"> {{ value || placeholder }} </view>
			</view>
			<view class="back_wrap" v-else>
				<view class="icon" v-if="back" @click="handleBack">
					<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/client/common/left_icon_white.png" mode="widthFix" style="max-width:100%" v-if="white"></image>
					<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/client/common/left_icon.png" mode="widthFix" style="max-width:100%" v-else></image>
				</view>
				<view class="title"> {{ title }} </view>
			</view>
		</view>
	  </view>
</template>

<script setup>
	import { onMounted,ref,computed,defineComponent,defineProps,defineEmits } from 'vue'
	import { useStore } from 'vuex'
	
	defineComponent({
		name:'custom-header'
	})
	
	const props = defineProps({
		search:{
			type:Boolean,
			default:()=>{
				return false
			}
		},
		back:{
			type:Boolean,
			default:()=>{
				return true
			}
		},
		placeholder:{
			type:String,
			default:()=>{
				return '请输入商品名称'
			}
		},
		value:{
			type:String,
			default:()=>{
				return ''
			}
		},
		title:{
			type:String,
			default:()=>{
				return ''
			}
		},
		bgColor:{
			type:String,
			default:()=>{
				return '#FFFFFF'
			}
		},
		borderColor:{
			type:String,
			default:()=>{
				return '#E5E5E5'
			}
		},
		white:{
			type:Boolean,
			default:()=>{
				return false
			}
		},
		sticky:{
			type:Boolean,
			default:()=>{
				return false
			}
		}
	})
	
	const store = useStore()
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	})
	
	const emits = defineEmits(['customSerach'])
	
	// 点击搜索
	const handleSearch = ()=>{
		uni.navigateTo({
			url:'/pages/search/search'
		})
	}
	// 返回上一级
	const handleBack = ()=>{
		const pages = getCurrentPages()
		if(pages.length > 1){
			uni.navigateBack({
				delta: 1
			});
		}else{
			uni.reLaunch({
				url:"/pages/index/index"
			})
		}
	}
	
</script>

<style lang="scss">
	.nav-bar {
	  box-sizing: content-box;
	  width: 100%;
	  z-index: 1000;
	  position: relative;
	  border-style: solid;
	  border-width: 0 0 1px 0;
	  &.sticky{
		  position:sticky;
		  top: 0;
		  left: 0;
	  }
	}
	
	.nav-content {
		position: absolute;
		bottom: 10rpx;
		width: 100%;
		.back_wrap{
			text-align: center;
			.icon{
				  width: 34rpx;
				  display: flex;
				  position: absolute;
				  bottom: 10rpx;
				  left: 30rpx;
			}
			.title{
				  font-size: 36rpx;
			}
		}
		.search_wrap{
			padding: 0 25rpx;
			width: 443rpx;
			height: 62rpx;
			border-radius: 62rpx;
			background: #F6F7F8;
			margin-left: 20rpx;
			display: flex;
			align-items: center;
			.icon{
				display: flex;
				width: 28rpx;
			}
			.placeholder{
				font-size: 28rpx;
				color: #A4A4A4;
				padding-left: 20rpx;
			}
			.value{
				color: #333333;
			}
		}
	}
</style>